<template>
  <div>
    <el-dialog
      width="50%"
      title="服务评价"
      :visible.sync="innerEvaluate"
      append-to-body
    >
      <div class="custom-body">
        <el-form ref="evaluateEntity" label-width="100px" :model="evaluateEntity" class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="办事效率"
                prop="bsxl"
                :rules="[{ required: true, message: '请选择评分', trigger: 'change' }]"
              >
                <el-rate v-model="evaluateEntity.bsxl" :allow-half="true" show-score style="margin-top: 5px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="服务态度"
                prop="fwtd"
                :rules="[{ required: true, message: '请选择评分', trigger: 'change' }]"
              >
                <el-rate v-model="evaluateEntity.fwtd" :allow-half="true" show-score style="margin-top: 5px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="信息完整度"
                prop="xxwzd"
                :rules="[{ required: true, message: '请选择评分', trigger: 'change' }]"
              >
                <el-rate v-model="evaluateEntity.xxwzd" :allow-half="true" show-score style="margin-top: 5px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="整体满意度"
                prop="ztmyd"
                :rules="[{ required: true, message: '请选择评分', trigger: 'change' }]"
              >
                <el-rate v-model="evaluateEntity.ztmyd" :allow-half="true" show-score style="margin-top: 5px" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="意见反馈" prop="content">
                <el-input
                  v-model="evaluateEntity.content"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  style="margin-top: 5px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item style="text-align: right">
            <el-button :loading="evaluateLoading" type="primary" @click="submitEvaluateForm('evaluateEntity')">
              提交评价
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveEvaluate } from '@/api/index/service/entity'

export default {
  name: 'Evaluate',
  data() {
    return {
      evaluateOpen: false,
      innerEvaluate: false,
      evaluateList: [],
      totalElements: 0,
      evaluateLoading: false,
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      evaluateEntity: { bsxl: 0.0, fwtd: 0.0, xxwzd: 0.0, ztmyd: 0.0, sfsm: 1, content: null, serviceId: null }
    }
  },
  methods: {
    openEntity(data) {
      this.evaluateEntity.serviceId = data.id
      this.openFormPj()
      this.evaluateOpen = true
    },
    initEvaluate() {
      this.$emit('call-bak')
    },
    openFormPj() {
      this.innerEvaluate = true
    },
    submitEvaluateForm(formName) {
      this.evaluateLoading = true
      this.$refs[formName].validate((valid) => {
        if (valid) { // 校验成功
          saveEvaluate(this.evaluateEntity).then((res) => {
            if (res.state === 200) {
              this.$notify({
                title: '保存评价信息成功',
                message: '保存评价信息成功！',
                type: 'success'
              })
              this.innerEvaluate = false
            } else {
              this.$notify({
                title: '您已评价，每个服务每天只能评价一次，请勿重复评价',
                type: 'warning'
              })
            }
            this.evaluateLoading = false
            this.evaluateEntity.rate = 5
            this.evaluateEntity.sfsm = 1
            this.evaluateEntity.content = null
            this.initEvaluate()
          }).catch(() => {
            this.$notify({
              title: '保存评价信息失败！',
              type: 'warning'
            })
            this.evaluateLoading = false
          })
        } else {
          this.evaluateLoading = false
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}
.my-dialog ::v-deep .el-dialog__body {
  padding: 0 !important;
}

.dialog-body {
  width: 100%;
  height: 480px;
  overflow: auto;
  position: relative;
}

.dialog-content {
  width: 100%;
  height: 410px;
  border-top: 1px solid #ebebeb;
  padding: 0 15px;
  box-sizing: border-box;
  overflow: hidden;
}

.dialog-li-question .block {
  float: left;
  margin-left: 10px;
}

.dialog-li-answer .block {
  float: right;
  margin-right: 0px;
  margin-left: 0px;
}

.dialog-li-question .avatar {
  width: 80px;
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 10px;
  font-size: 14px;
  overflow: hidden;
}

.dialog-li-answer .avatar {
  float: right;
  text-align: right;
  margin-right: 10px;
}

.dialog-li-question .question {
  float: left;
  height: 40px;
  line-height: 40px;
}

.dialog-li-answer .question {
  text-align: right;
  float: right;
  color: #999999;
  font-size: 12px;
}

.dialog-button {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: right;
  padding: 0 20px;
  box-sizing: border-box;
}

.dialog-evaluate-li {
  width: 100%;
  line-height: 40px;
  border-bottom: 1px solid #ebebeb;
}

.evaluate-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.evaluate-header .block {
  float: left;
  margin-left: 10px;
}

.evaluate-header .avatar {
  width: 80px;
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 10px;
  font-size: 14px;
  overflow: hidden;
}

.evaluate-header .question {
  float: left;
  height: 40px;
  line-height: 40px;
}

.evaluate-date {
  float: right;
  line-height: 40px;
  font-size: 12px;
  color: #999999;
}

</style>
